<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <script src="/static/js/jquery.min.js" type="text/javascript"></script>
    <link href="/static/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.2/font/bootstrap-icons.css" rel="stylesheet">
    <link rel="icon" href="/static/img/favicon.png">
    {% load static %}
    {% block css %}{% endblock %}
    <title>{% block title %}{% endblock %}</title>
</head>

<body>
{#导航#}
<header>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="{% url "home" %}">JvHub</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
                aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="{% url "home" %}">主站<span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item active">
                    <a class="nav-link" href="{% url 'all_live' %}">直播<span class="sr-only">(current)</span></a>
                </li>
            </ul>
            <ul class="navbar-nav mr-auto"></ul>
            <ul class="navbar-nav mr-auto"></ul>
            <ul class="navbar-nav mr-auto"></ul>
            <form class="form-inline my-2 my-lg-0" style="left:30%" action="{% url "search_video" %}" method="GET">
                <input class="form-control mr-sm-2" type="search" placeholder="搜索" aria-label="Search"
                       name="keyword">
                <button class="btn btn-outline-success my-2 my-sm-0" type="submit">搜索</button>
            </form>
            <ul class="navbar-nav mr-auto"></ul>
            <ul class="navbar-nav mr-auto"></ul>
            {% if request.user.is_authenticated %}
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
                           data-toggle="dropdown" aria-expanded="false">
                            {% if request.session.is_new_message %}
                                <div style="width: 8px;height: 8px;border-radius: 4px;background-color: red;display:inline;float:left"></div>
                            {% endif %}
                            <img src="{{ MEDIA_URL }}{{ user.image }}" alt="..." class="rounded-circle"
                                 style="width: 30px;height: 30px;">

                        </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                            <a class="dropdown-item" href="{% url 'user' %}">个人中心</a>
                            {% if request.user.is_certificate %}
                                <a class="dropdown-item" href="{% url 'live_setting' %}">直播中心</a>
                            {% endif %}
                            <a class="dropdown-item" href="{% url 'user_message' %}">我的消息
                                {% if request.session.is_new_message %}
                                    <div style="width: 8px;height: 8px;border-radius: 4px;background-color: red;display:inline-block"></div>
                                {% endif %}
                            </a>
                            <a class="dropdown-item" href="{% url 'user_video' %}">我的视频</a>
                            <a class="dropdown-item" href="{% url 'logout' %}">注销</a>
                        </div>
                    </li>
                </ul>
            {% else %}
                <button type="button" class="btn aui-btn-default" style="color: #007bff" data-toggle="modal"
                        data-target="#login_model" id="login_show_button" data-whatever="@mdo">登录
                </button>
                <ul class="navbar-nav mr-1"></ul>

                <div class="btn-group">
                    <button type="button" class="btn aui-btn-default dropdown-toggle" style="color: #007bff"
                            data-toggle="dropdown" aria-expanded="false">
                        注册
                    </button>
                    <div class="dropdown-menu">
                        <a class="dropdown-item" type="button" data-toggle="modal" data-target="#register"
                           data-whatever="@mdo">注册</a>
                        <a class="dropdown-item" type="button" data-toggle="modal" data-target="#mail_register"
                           data-whatever="@mdo">邮箱注册</a>
                    </div>
                </div>
                <ul class="navbar-nav mr-auto"></ul>
            {% endif %}
        </div>
    </nav>

    {#    登录弹窗#}
    <div class="modal fade" id="login_model" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">登录</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="login">
                        <div class="form-group">
                            <label for="recipient-name" class="col-form-label">账户:</label>
                            <input type="text" class="form-control" id="login_username" name="username"
                                   placeholder="输入用户ID或邮箱" autocomplete="off">
                        </div>
                        <div class="form-group">
                            <label for="recipient-name" class="col-form-label">密码:</label>
                            <input type="password" class="form-control" id="login_password" name="password"
                                   placeholder="输入密码" autocomplete="off">
                        </div>
                        <div class="modal-footer">
                            <div id="login_error" class="text-danger"></div>
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                            <button type="submit" class="btn btn-primary" id="login_button"
                                    onclick="operation('#login','#login_button','{% url 'login' %}','#login_error')">
                                登录
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    {#    用户名注册弹窗#}
    <div class="modal fade" id="register" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">注册</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="re">
                        <div class="form-group">
                            <label for="recipient-name" class="col-form-label">账户ID:</label>
                            &nbsp;
                            <i class="bi bi-question-circle text-secondary" title="账户（8~16）位，且除下划线外不能含有特殊字符"></i>
                            <input type="text" class="form-control" id="re_username" name="username"
                                   placeholder="输入账户ID"
                                   autocomplete="off">
                        </div>
                        <div class="form-group">
                            <label for="recipient-name" class="col-form-label">密码:</label>
                            &nbsp;
                            <i class="bi bi-question-circle text-secondary"
                               title="密码（8~16）位，包括至少一位大写字母，一位小写字母，一个数字，一个特殊字符"></i>
                            <input type="password" class="form-control" id="re_password" name="password"
                                   placeholder="输入密码" autocomplete="off">
                        </div>
                        <div class="form-group">
                            <label for="recipient-name" class="col-form-label">确认密码:</label>
                            <input type="password" class="form-control" id="re_check_password" name="check_password"
                                   placeholder="确认密码" autocomplete="off">
                        </div>
                        <div class="modal-footer">
                            <div id="re_error" class="text-danger"></div>
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                            <button type="submit" class="btn btn-primary" id="re_button"
                                    onclick="operation('#re','#re_button','{% url 're' %}','#re_error')">注册
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    {#    邮箱注册弹窗#}
    <div class="modal fade" id="mail_register" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">邮箱注册</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="re_email">
                        <div class="form-group">
                            <label for="recipient-name" class="col-form-label">邮箱:</label>
                            <input type="text" class="form-control" id="email" name="email" placeholder="输入邮箱"
                                   autocomplete="off">
                        </div>
                        <div class="form-group">
                            <label for="recipient-name" class="col-form-label">密码:</label>
                            &nbsp;
                            <i class="bi bi-question-circle text-secondary"
                               title="密码（8~16）位，包括至少一位大写字母，一位小写字母，一个数字，一个特殊字符"></i>
                            <input type="password" class="form-control" id="mail_password" name="password"
                                   placeholder="输入密码" autocomplete="off">
                        </div>
                        <div class="form-group">
                            <label for="recipient-name" class="col-form-label">确认密码:</label>
                            <input type="password" class="form-control" id="mail_check_password"
                                   name="check_password"
                                   placeholder="确认密码" autocomplete="off">
                        </div>
                        <div class="modal-footer">
                            <div id="re_email_error" class="text-danger"></div>
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                            <button type="submit" class="btn btn-primary" id="re_email_button"
                                    onclick="operation('#re_email','#re_email_button','{% url 're_email' %}','#re_email_error')">
                                注册
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</header>

{#  内容 #}
<div class="body">
    <p></p>
    {% block content %}
    {% endblock %}
    <div id="toastShowing"></div>
</div>

<footer>
    <script src="/static/js/popper.min.js"></script>
    <script src="/static/js/bootstrap.min.js"></script>
    <script>
        {% if request.user.is_authenticated %}
            const ws_scheme_personal = window.location.protocol === "https:" ? "wss" : "ws";
            const ws_path_personal = ws_scheme_personal + "://" + window.location.host + "/ws/personal/" + '{{ request.user.username }}' + "/";
            const wss = new WebSocket(ws_path_personal);
        {% endif %}
        {% if request.path != '/user/message/' and request.user.is_authenticated %}
            {#     监控是否接收到信息  #}
            wss.onmessage = function (event) {
                const data = JSON.parse(event.data);
                {#         toast 删除#}
                let name = '';
                if (data['send_nick_name']) {
                    name = data['send_nick_name'];
                } else {
                    name = data ['sender']
                }
                var html = '<div class="position-fixed bottom-0 right-0 p-3" style="z-index:20; right: 0; bottom: 0">\n' +
                    '  <div id="liveToast" class="toast show" style="width: 150rem" role="alert" aria-live="assertive" aria-atomic="true" data-delay="2000">\n' +
                    '    <div class="toast-header">\n' +
                    '      <a target="_blank" href="/user/message/?recipient_username=' + data['sender'] + ' "><img src="' + data['image'] + '"style="width: 16px;height: 16px;border-radius: 8px" class="rounded mr-2" alt="..."></a>\n' +
                    '      <strong class="mr-auto"><a style="text-decoration:none;color:#6E757D" target="_blank" href="/user/message/?recipient_username=' + data ['sender'] + ' ">' + name + '(' + data['read_num'] + ')</a></strong>\n' +
                    '      <small>' + data['time'] + '</small>\n' +
                    '      <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close" onclick="' + "$('#liveToast').remove()" + '">\n' +
                    '        <span aria-hidden="true">&times;</span>\n' +
                    '      </button>\n' +
                    '    </div>\n' +
                    '    <div class="toast-body text-truncate"><a target="_blank" style="text-decoration:none;color:black" href="/user/message/?recipient_username=' + data ['sender'] + ' ">\n' +
                    data['message'] +
                    '    </a></div>\n' +
                    '  </div>\n' +
                    '</div>';
                $('#toastShowing').html(html);
                setTimeout(function () {
                    $('#toastShowing').fadeOut(2000);
                }, 5000)
            };
            $('#toastShowing').html('');
        {% endif %}

        {#        表单ajax异步 #}

        function operation(form_id, submit_button, url, msg_id) {
            $.ajax({
                type: 'POST',
                url: url,
                dataType: 'json',
                data: $(form_id).serialize(),
                async: true,

                beforeSend: function (xhr, setting) {
                    xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");
                    $(submit_button).attr({disabled: "disabled"});
                },
                success: function (data) {
                    if (data.status == 'fail') {
                        $(msg_id).html(data.msg);
                    } else if (data.status == 'success') {
                        if (data.msg) {
                            alert(data.msg);
                        }
                        window.location.reload();
                    }
                },
                complete: function () {
                    $(submit_button).removeAttr('disabled');
                },
            });
        }

    </script>

    {% block custom_jss %}
    {% endblock %}
</footer>

</div>
</body>

</html>